<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>脚本列表</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<script src="/js/Vue.js"></script>
<script src="/js/element.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/Qs.js"></script>
<script type="text/javascript" src="/js/layer.js"></script>

<style>
    /*表格操作栏 自定义样式*/
    .el-link {
        margin-right:8px;
    }
    #scriptAudit {
        height:100%;
    }
    #search .el-card__body {
        height:40px;
    }
    #table {
        height:calc(100% - 74px);
    }
    /*翻页样式*/
    .el-pagination {
        margin-top: 5px;
    }
</style>
<div id="scriptAudit">
    <!--    查询框-->
    <el-card id="search">
        <el-form :inline="true" :model="scriptForm" class="demo-form-inline">
            <el-form-item label="脚本名称">
                <el-input v-model="scriptForm.name" clearable placeholder="请输入脚本名称" style="width:200px;"></el-input>
            </el-form-item>
            <el-form-item label="预案名称">
                <el-select v-model="scriptForm.asid" clearable placeholder="选择预案">
                    <el-option
                            v-for="item in asList"
                            :key="item.index"
                            :label="item.asName"
                            :value="item.asid">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="事件级别">
                <el-select v-model="scriptForm.level" clearable placeholder="选择事件级别">
                    <el-option
                            v-for="item in 4"
                            :key="item.index"
                            :label=`${item}级事件`
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" @click="searchCandidateScriptHandle" size="large">查询</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <!--    查询数据展示表格-->
    <el-card id="table">
        <el-table
                border
                :stripe="true"
                ref="multipleTable"
                :data="scriptList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    prop="scriptName"
                    label="脚本名称">
            </el-table-column>
            <el-table-column
                    prop="assumptions.asName"
                    label="预案">
            </el-table-column>
            <el-table-column
                    label="事件级别">
                <template slot-scope="scope">
                    {{scope.row.responseLevel | level}}
                </template>
            </el-table-column>
            <el-table-column label="脚本审核">
                <template slot-scope="scope">
                    <el-link icon="el-icon-view" @click="scriptPreview(scope.row.scriptid)" type="warning">预览</el-link>
                    <el-link icon="el-icon-circle-check" @click="scriptAudit(scope.row.scriptid,true)" type="success">通过</el-link>
                    <el-link icon="el-icon-circle-close" @click="scriptAudit(scope.row.scriptid,false)" type="danger">驳回</el-link>
                </template>
            </el-table-column>
        </el-table>
        <!--        页码-->
        <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev, pager, next, jumper"
                :total="scriptList.length">
        </el-pagination>
    </el-card>
</div>
<script>
    var qs = Qs;
    var previewID = "";
    var scriptAudit = new Vue({
        el:"#scriptAudit",
        data(){
            return {
                //翻页相关数据
                currentPage: 1,
                pageSize: 10,
                //脚本查询表单
                scriptForm:{
                    //预案id
                    asid:"",
                    //事件级别
                    level:"",
                    //脚本名称
                    name:"",
                    page:1,
                    size:99999999
                },
                //脚本数据列表
                scriptList:[],
                //预案数据列表
                asList:[],
            }
        },
        mounted(){
            //查询所有预案
            this.asSearch();
            //查询所有候选脚本
            this.searchCandidateScript();
        },
        filters:{
            level(val){
                return val + "级事件";
            }
        },
        methods:{
            //页码相关
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //查询所有预案
            asSearch() {
                let params = {
                    categoryid: "",
                    keyword: ""
                }
                axios.get('/assumption/list', {params}).then(res => {
                    this.asList = res.data;
                }).catch(err => {
                    console.log(err);
                })
            },
            //手动查询
            searchCandidateScriptHandle(){
                if(this.scriptForm.name == "" && this.scriptForm.asid == "" &&this.scriptForm.level == ""){
                    this.$message.error("请输入脚本名称或选择预案或选择事件级别！");
                }else{
                    this.searchCandidateScript();
                }
            },
            //最后一页最后一条数据删除时，页码纠正
            deleteCorrect(data){
                const totalPage = Math.ceil((data.length - 1) / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //查询页码纠正
            deleteCorrect2(data){
                const totalPage = Math.ceil(data.length / this.pageSize) // 总页数
                this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
                this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
            },
            //查询候选脚本
            searchCandidateScript(){
                let params = Qs.stringify(this.scriptForm);
                axios.get('/script/submit_list?'+params).then(res=>{
                    if(res.data.success){
                        this.scriptList = res.data.content;
                        this.deleteCorrect2(this.scriptList);
                    }
                }).catch(err=>{
                    console.log(err);
                })
            },
            //脚本审核
            scriptAudit(ScriptID,Flag){
                let formData = new FormData();
                formData.append("id",ScriptID);
                formData.append("pass",Flag);
                formData.append("reason","");
                if(Flag){
                    axios.post('/script/check',formData).then(res=>{
                        if(res.data.success){
                            this.$message.success("审核完成！");
                            this.deleteCorrect(this.scriptList);
                            //刷新候选脚本列表
                            this.searchCandidateScript();
                        }else{
                            this.$message.error(res.data.message);
                        }
                    }).catch(err=>{
                        console.log(err);
                    })
                }else{
                    layer.prompt({title: '请输入您驳回脚本的原因！', formType: 2}, (text,index)=>{
                        formData.set("reason",text);
                        axios.post('/script/check',formData).then(res=>{
                            if(res.data.success){
                                this.$message.success("审核完成！");
                                this.deleteCorrect(this.scriptList);
                                //刷新候选脚本列表
                                this.searchCandidateScript();
                                //关闭对话框
                                layer.close(index);
                            }else{
                                this.$message.error(res.data.message);
                                //关闭对话框
                                layer.close(index);
                            }
                        }).catch(err=>{
                            console.log(err);
                        })
                    });
                }
            },
            //脚本预览
            scriptPreview(id){
                //保存脚本预览Id
                previewID = id;
                //打开脚本预览窗口
                layer.open({
                    type: 2,
                    title: '脚本预览',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['80%', '80%'],
                    content: '/dialog/script/scriptPreview.html',
                })
            }
        }
    })
</script>
</body>
</html>